<template>
  <div class="home">
    <div class="box-card">
      <el-card>
        <div class="top">
          <div id="main" style="width: 45%; height: 100%"></div>
          <div id="echart" style="width: 45%; height: 100%"></div>
        </div>
      </el-card>
    </div>
    <div class="box_bottom">
      <el-card class="box-card_two">
        <div id="bottom_main" style="width: 100%; height: 100%"></div>
      </el-card>
      <el-card class="box-card_three">
        <div id="bottom_echart" style="width: 100%; height: 100%"></div>
      </el-card>
    </div>
  </div>
</template>
<script lang="ts" setup name="Index">
import { broken_line_init, bar_chart_init, doughunt_chart_init, line_init } from './chart'
import { useGetEchart } from '@/hooks/useGetEchart'
onActivated(() => {
  const main = useGetEchart('main')
  const echart = useGetEchart('echart')
  const bottom_main = useGetEchart('bottom_main')
  const bottom_echart = useGetEchart('bottom_echart')
  broken_line_init(main)
  bar_chart_init(echart)
  doughunt_chart_init(bottom_main)
  line_init(bottom_echart)
})
</script>
<style lang="scss" scoped>
.home {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  :deep(.el-card),
  :deep(.el-card__body) {
    width: 100%;
    height: 100%;
  }
  .box-card {
    height: 50%;
    .top {
      height: 100%;
      display: flex;
      justify-content: space-between;
      #echart {
        margin-left: 50px;
      }
    }
  }
  .box_bottom {
    width: 100%;
    height: 47%;
    display: flex;
    justify-content: space-between;
    .box-card_two,
    .box-card_three {
      width: 47%;
      height: 100%;
    }
  }
}
</style>
